<template>
    <div>
        路由测试
    </div>
    <div>
        <RouterLink replace to="/home">首页</RouterLink>
        <RouterLink replace :to="{name:'xinwen'}">新闻</RouterLink>
        <RouterLink replace :to="{path:'/about'}">关于</RouterLink>
    </div>
    <div>
        <RouterView></RouterView>
    </div>
</template>

<script lang="ts" setup name="App">
    import {RouterView,RouterLink,useRouter} from 'vue-router'
    import {onMounted} from 'vue'

    const router=useRouter()
    onMounted(()=>{
        setTimeout(()=>{
            //编程式路由导航，即为用script代码进行路由跳转
            //使用场景>>RouterLink标签跳转，因为标签只能进行点击RouterLin标签才跳转
            //编程式就很自由，随便在各种标签的监听事件都可以进行跳转
            router.push("/news")
        },3000)
    })

</script>

<style>
.hello{
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>